let menuConfig
const setSidebarMenu = function (menu) {
  menuConfig = menu
}
const getSidebarMenu = function () {
  return menuConfig
}

export { setSidebarMenu, getSidebarMenu }

export default {
  props: ['collapse'],
  data () {
    return {
      menuData: menuConfig
    }
  },
  computed: {
    defaultActive () {
      return this.$route.name
    }
  },
  methods: {},
  render () {
    const menuItemSelect = name => {
      if (this.defaultActive != name) {
        this.$router.push({ name })
      }
    }
    // 获取二级菜单
    const MenuItem = function (item) {
      return (
        <el-menu-item
          index={item.index}
          key={item.index}
          v-w-role={item.role}
          onClick={() => menuItemSelect(item.index)}
        >
          <i class={item.icon}></i>
          <span slot='title'>{item.title}</span>
        </el-menu-item>
      )
    }
    return (
      <el-menu default-active={this.defaultActive} collapse={this.collapse}>
        {this.menuData.map(item => {
          if (item.children) {
            return (
              <el-submenu index={item.index} v-w-role={item.role}>
                <template slot='title'>
                  <i class={item.icon}></i>
                  <span slot='title'>{item.title}</span>
                </template>
                {item.children.map(item => {
                  return MenuItem(item)
                })}
              </el-submenu>
            )
          } else {
            return MenuItem(item)
          }
        })}
      </el-menu>
    )
  }
}
